<template>
  <div class="app-container">
    <el-row>
      <el-col :span="22">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="起止时间" prop="date">
            <el-date-picker
              v-model="queryParams.date"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2" style="text-align: right">
        <el-button type="primary" icon="el-icon-download" size="mini" >导出</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="8" v-for="charts in echartList">
        <echarts-common :title="charts.title">
          <component :is="charts.chart" :chartData="charts.data" :unit="charts.unit" :title="charts.title" />
        </echarts-common>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import echartsCommon from "./echartsCommon.vue";
import LineChart from './echarts/LineChart'
import RaddarChart from './echarts/RaddarChart'
import PieChart from './echarts/PieChart'
import PieChart1 from './echarts/PieChart1'
import PieChart2 from './echarts/PieChart2'
import BarChart from './echarts/BarChart'
import BarChartL from './echarts/BarChartL.vue';
import BarChartS from './echarts/BarChartS.vue';
import {getRent, getRentDelay, getRentDeposit, getRentPercent, getRentPay, getRentIncomeExpense} from '@/api/statistics/rent'
export default {
  name: 'rent',
  components: {
    echartsCommon,
    LineChart,
    RaddarChart,
    PieChart,
    PieChart1,
    PieChart2,
    BarChart,
    BarChartL,
    BarChartS
  },
  data() {
    return {
      queryParams: {
        date: []
      },
      echartList: [
        {
          title: '租金收入',
          chart: BarChart,
          unit: '元',
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
        {
          title: '租金收缴及时性',
          chart: PieChart1,
          unit: '个',
          data: []
        },
        {
          title: '租金收入占比',
          chart: PieChart2,
          unit: '元',
          data: []
        },
        {
          title: '租金拖欠时长',
          chart: BarChartL,
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
        {
          title: '收入支出情况',
          chart: PieChart,
          unit: '元',
          data: [],
        },
        {
          title: '押金情况',
          chart: BarChartS,
          unit: '个',
          data: {
            xAxisData: [],
            yAxisData: [

              {
                name: '未退',
                data: []
              },
              {
                name: '已退',
                data: []
              },
              // {
              //   name: '不退',
              //   data: [
              //     Math.floor(Math.random() * 10),
              //     Math.floor(Math.random() * 10),
              //     Math.floor(Math.random() * 10),
              //     Math.floor(Math.random() * 10),
              //     Math.floor(Math.random() * 10),
              //     Math.floor(Math.random() * 10),
              //     Math.floor(Math.random() * 10),
              //   ]
              // },
            ],
            stack: 'vistors',
          }
        },
      ]
    }
  },

  mounted() {
    this.getData()
  },
  methods: {
    handleQuery() {
      let params = {}
      if(this.queryParams.date && this.queryParams.date.length > 0) {
        params.startDate = moment(this.queryParams.date[0]).startOf('month').format('YYYY-MM-DD HH:mm:ss')
        params.endDate = moment(this.queryParams.date[1]).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      } else {
        params.startDate = ''
        params.endDate = ''
      }
      this.getData(params)
    },
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.handleQuery();
    },
    getData(params) {
      getRent(params).then(res => {
        let x = [];
        let y = [];
        res.data.forEach(item => {
          x.push(item.commonMonth)
          y.push(Number(item.commonNum))
        })
        this.echartList[0].data.xAxisData = x
        this.echartList[0].data.yAxisData = y
      })
      getRentPay(params).then(res => {
        let data = res.data.map(item => {
          return {
            value: Number(item.commonNum),
            name: item.commonStatus
          }
        })
        this.echartList[1].data = data
      })
      getRentPercent(params).then(res => {
        let data = res.data.map(item => {
          return {
            value: Number(item.commonNum),
            name: item.commonStatus
          }
        })
        this.echartList[2].data = data
      })
      getRentDelay(params).then(res => {
        let x = [];
        let y = [];
        res.data.forEach(item => {
          x.push(item.commonStatus)
          y.push(Number(item.commonNum))
        })
        this.echartList[3].data.xAxisData = x
        this.echartList[3].data.yAxisData = y
      })
      getRentIncomeExpense(params).then(res => {
        let data = res.data.map(item => {
          return {
            value: Number(item.commonNum),
            name: item.commonStatus
          }
        })
        this.echartList[4].data = data
      })
      getRentDeposit(params).then(res => {
        let x = [];
        let y = [];
        let y1 = []
        let y2 = []
        res.data.forEach(item => {
          x.push(item.commonMonth)
          y.push(Number(item.commonNum))
          y1.push(Number(item.commonContent))
          y2.push(Number(item.commonNum))
        })
        this.echartList[5].data.xAxisData = x
        this.echartList[5].data.yAxisData[0].data = y1
        this.echartList[5].data.yAxisData[1].data = y2
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
